<template>
	<view class="body">
		<view class="content">
			<textarea class="textarea_style" value="" v-model="form.contents" placeholder="个人简介,工作经验,能力介绍等描述" />
			<view style="display: flex;align-items: flex-start;align-items: center;flex-wrap: wrap;">
				<view style="position: relative;" v-for="(item,index) in imgList" :key="index">
					<image class="upload_img" :src="item" mode=""></image>
					<image class="close_icon" @click="deleteImg(index)" src="../../static/img/close.png" mode=""></image>
				</view>
				<view class="publish" @tap="uploadImg">
					<image class="publish_add" src="../../static/img/add.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="select">
				<view class="select_left">
					<view class="select_text">区域</view>
				</view>
				<view class="select_left"> -->
					<!-- <picker @change="bindChangeArea" :value="areaIndex" :range="areaArray" :range-key="'areaName'">
						<view class="select">
							<view class="select_left">
								<view class="select_text">区域</view>
							</view>
							<view class="select_left">
								<view class="uni-input">{{areaArray[areaIndex].areaName}}</view>
								<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
					</picker> -->
				<!-- 	<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view> -->
			<view class="select">
				<view class="select_left">
					<view class="select_text">求职岗位</view>
				</view>
				<view class="select_left">
					<input v-model="form.post"  placeholder="请填写求职岗位" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">期望薪资</view>
				</view>
				<view class="select_left">
					<input v-model="form.salary" type="number"  placeholder="请填写薪资(元/月)" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">联系人</view>
				</view>
				<view class="select_left">
					<input v-model="form.customerName" placeholder="请填写联系人姓名" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">电话号码</view>
				</view>
				<view class="select_left">
					<input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入电话号码" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">微信号</view>
				</view>
				<view class="select_left">
					<input v-model="form.customerWechat"  placeholder="请输填写微信号" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="line_br"></view>
		<view class="bling">	
			<view class="bling_name">个人亮点</view>
			<view class="bling_tag">
				<view class="bling_tag_inner" v-for="(item,index) in tagList" :class="{selected_color: selectedTag.includes(item.dictLabel)}" :key="index" @tap="selectTag(item.dictLabel)">{{item.dictLabel}}</view>
			</view>
			<view class="bling_select">{{selectedTag.join(",")}}</view>
		</view>
		<view class="submit_btn" @tap="submitHouse">提交</view>
		
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				tagList: [],
				form:{
					areaCode: '',
					customerName: '', 
					customerWechat: '', 
					mobile: '', 
					contents: '',
					img: ''
				},
				areaIndex: 0,
				areaArray: [],
				
				
				modalName: '',
				array: [],
				index: 0,
				typeIndex: 0,
				houseTypeArray: [],
				payArray: [],
				index2: 0,
				positionArray: [],
				index3: 0,
				address: '',
				
				imgList: [],
				selectedTag: [],
				list: [],
				searchKey: '',
				latitude: '',
				longitude: '',
				info: {},
				whichIndex: '',
				detailId: '',
				tabclick: false,
				isVerify: false,
				countIndex1: 0,
				countIndex2: 0,
				countIndex3: 0,
				floorIndex1: 1,
				floorIndex2: 1,
				index4: '',
				index5: '',
				showType: true
			}
		},
		onLoad(option) {
			this.getArea()
			this.getSelect("bright_points_job") //求职
			console.log(option)
			this.detailId = option.id
			if(this.detailId){
				this.getDetail()
			}
		},
		methods: {
			//获取区域
			getArea(){
				let that = this
				that.$api.request('/api/area/job/list','',{
					
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.areaArray = res.rows
				})
			},
			//选择区域
			bindChangeArea(e){
				console.log(e)
				this.areaIndex = e.target.value
			},
			//获取选择项
			getSelect(type){
				let that = this;
				that.$api.request('/api/dict/data/list','',{
					dictType: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.tagList = res.rows
				})
			},
			resetForm(){
				this.form = {
					areaCode: '',
					customerName: '', 
					customerWechat: '', 
					mobile: '', 
					contents: '',
					img: ''
				}
				this.imgList = []
				this.index = 0
				this.selectedTag = []
			},
			//发布
			submitHouse(){
				let that=this
				// 处理亮点
				let highlights = ''
				let newArr = []
				for (let i = 0; i < that.tagList.length; i++) {
					for (let j = 0; j < that.selectedTag.length; j++) {
						if(that.tagList[i].dictLabel === that.selectedTag[j]){
							newArr.push(that.tagList[i].dictLabel)
						}
					}
				}
				highlights = newArr.join(",")
				if(!that.form.contents){
					uni.showToast({
						title: "请填写岗位描述！",
						icon: "none"
					});
					return false
				}
				if(!that.form.post){
					uni.showToast({
						title: "请填写求职岗位！",
						icon: "none"
					});
					return false
				}
				if(!that.form.customerName){
					uni.showToast({
						title: "请输入姓名！",
						icon: "none"
					});
					return false
				}
				if(!that.form.mobile){
					uni.showToast({
						title: "请填写手机号码",
						icon: "none"
					});
					return false
				}
				if(that.detailId){ //编辑
					that.$api.request('/api/recruitmentjob/edit','',{
						id: that.detailId,
						addUserid:  uni.getStorageSync("userId"),
						areaCode: that.areaArray[that.areaIndex].areaName,
						customerName: that.form.customerName, //姓名
						customerWechat: that.form.customerWechat, //发布者微信
						mobile: that.form.mobile, //电话
						post: that.form.post,
						salary: that.form.salary,
						state: 6,
						stick: that.form.stick,
						contents: that.form.contents,//介绍
						img: that.imgList.join(","),
						highlights: highlights,
						type: '1' //0招聘,1求职
					}, failres => {
						uni.showToast({
							title: failres.msg,
							icon: "none"
						});
					}).then(res => {
						that.resetForm()
						uni.navigateTo({
							url: '../fangyuan/fangyuan?type=1'
						})
					})
				}else{ //新增
					that.$api.request('/api/recruitmentjob/add','',{
						addUserid:  uni.getStorageSync("userId"),
						areaCode: that.areaArray[that.areaIndex].areaName,
						customerName: that.form.customerName, //姓名
						customerWechat: that.form.customerWechat, //发布者微信
						mobile: that.form.mobile, //电话
						post: that.form.post,
						salary: that.form.salary,
						state: 6,
						stick: 1,
						contents: that.form.contents,//介绍
						img: that.imgList.join(","),
						highlights: highlights,
						type: '1' //0招聘,1求职
					}, failres => {
						uni.showToast({
							title: failres.msg,
							icon: "none"
						});
					}).then(res => {
						that.resetForm()
						uni.navigateTo({
							url: '../fangyuan/fangyuan?type=1'
						})
					})
				}
			},
			//获取详情
			getDetail(){
				let that = this;
				that.$api.request('/api/recruitmentjob/detail','',{
					id: that.detailId
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.form = res.data
					if(that.form.salary == 'undefined' || that.form.salary == null || that.form.salary == ''){
						that.form.salary = ''
					}
					if(that.form.img){
						that.imgList = that.form.img.split(",")
					}else{
						that.imgList = []
					}
					that.selectedTag = []
					// 亮点
					if(that.form.highlights){
						let shighlights = that.form.highlights.split(",")
						for(let i=0;i<shighlights.length;i++){
							for(let j=0;j<that.tagList.length;j++){
								if(shighlights[i] == that.tagList[j].dictLabel){
									that.selectedTag.push(that.tagList[j].dictLabel)
								}
							}
						}
					}
					//区域
					that.areaIndex = that.areaArray.findIndex(item =>{
					    return item.areaName == that.form.areaCode
					});
				})
			},
			sureAudit(){
				this.modalName = ''
				uni.switchTab({
					url: '../home/home'
				})
			},
			getUserInfo(){
				let that = this
			   uni.getUserProfile({
				   desc:'Wexin',     // 这个参数是必须的
				   success:res=>{
					   uni.setStorageSync('nickName', res.userInfo.nickName);
					   uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
					   uni.login({
					   	provider: 'weixin',
					   	success: (wxres => {
					   		that.$api.request('/api/web/wxlogin','',{
					   			code: wxres.code,
					   		}, failres => {
					   			uni.showToast({
					   				title: failres.msg,
					   				icon: "none"
					   			});
					   		}).then(res1 => {
					   			uni.setStorageSync('token', res1.data.token);
					   			uni.setStorageSync('openid', res1.data.openid);
								uni.setStorageSync('userId', res1.data.user.userId);
								// that.getStatus()
					   		})
					   	})
					   })
				   },
				   fail:err=>{
					   uni.switchTab({
					   	url: "../home/home"
					   })
				   }
			   })
			},	
			// 选择亮点
			selectTag(i){
				let that = this
				if(that.selectedTag.includes(i)){
					that.selectedTag = that.selectedTag.filter(function(item) {
						return item != i
					});
				}else{
					that.selectedTag.push(i)
				}
			},
			// 上传图片
			uploadImg(){
				const that = this
				that.$api.uploadImg((res => {
					that.imgList.push(res)
				}))
			},
			// 删除图片
			deleteImg(index){
				this.imgList.splice(index,1)
			}
		}
	}
</script>

<style lang="scss">
	.uni-input{
		font-size: 28rpx;
	}
	.close_img{
		width: 30rpx;
		height: 30rpx;
	}
	.diolag{
		position:fixed;
		background-color:rgba(0,0,0,0.5);
		width:100vw;
		height:100vh;
		top:0;
		left:0;
	}
	.diolag_inner{
		width:90%;
		margin:0 auto;
		position:absolute;
		top:15vh;
		left:2.5%;
		background: #ffffff;
		border-radius: 20rpx;
		max-height: 80vh;
		overflow-y: scroll;
		padding: 20rpx;
	}
	.diolag_title{
		width: 90%;
		margin: 0 auto;
		text-align: center;
		color: #333333;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	.select_address{
		border: 1rpx solid #007AFF;
		border-radius: 10rpx;
	}
	.address_input{
		width: 100%;
		height: 50rpx;
		background: #ffffff;
		border-radius: 10rpx;
		line-height: 50rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #efefef;
	}
	.input_style{
		outline: none;
		border-bottom: 1px solid #ebebeb;
		margin-top: 20rpx;
		text-align: center;
	}
	.sure_btn{
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #ffffff;
		background: #007AFF;
		text-align: center;
		margin: 50rpx auto 0 auto;
		border-radius: 10rpx;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.body{
		width: 100%;
		background: #F5F5F5;
		min-height: 100vh;
		.content{
			width: 97%;
			margin: 0 auto;
			.textarea_style{
				width: 100%;
				height: 200rpx;
				font-size: 36rpx;
				line-height: 50rpx;
				padding-top: 10rpx;
				color: #000000;
			}
			.upload_img{
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
				margin-bottom: 30rpx;
			}
			.close_icon{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: 0;
				top: -15rpx;
			}
			.publish{
				width: 200rpx;
				height: 200rpx;
				background: #EFEFEF;
				position: relative;
				margin-bottom: 30rpx;
				.publish_add{
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					left: 50rpx;
					top: 50rpx;
				}
			}
			.select{
				width: 100%;
				height: 80rpx;
				border-top: 1rpx solid #E6E6E6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.select_left{
					display: flex;
					align-items: center;
					.select_icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
				.select_text{
					font-size: 32rpx;
					color: #000000;
					margin-right: 20rpx;
				}
				.to_arrow{
					width: 30rpx;
					height: 30rpx;
				}
			}
			
		}
		.line_br{
			width: 100%;
			height: 20rpx;
			background: #FFFFFF;
		}
		.bling{
			width: 90%;
			margin: 0 auto;
			padding-bottom: 100rpx;
			padding-top: 30rpx;
			.bling_name{
				color: #000000;
				font-size: 32rpx;
			}
			.bling_tag{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.bling_tag_inner{
					background: #E5E5E5;
					color: #828282;
					font-size: 32rpx;
					padding: 5rpx 10rpx;
					margin-right: 30rpx;
					border-radius: 10rpx;
				}
				.selected_color{
					background: #007AFF;
					color: #ffffff;
				}
			}
			.bling_select{
				font-size: 32rpx;
				color: #333333;
				margin-top: 30rpx;
			}
		}
		.submit_btn{
			width: 100%;
			height: 100rpx;
			background: #0091FF;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>
